<template>
	<view class="">
		<cs v-if="ver"></cs>
		<view class="content" v-else>
			<view class="content_line">
				<view class="content_line_first">
					<view class="content_lt_view"></view>
					<view class="content_rt_view"></view>
				</view>

				<view class="context_view">
					<image class="img_suancaishen" src="../static/suancaishen.png" mode="aspectFit"></image>
					<image class="img_slogin" src="../static/slogin.png" mode="aspectFit"></image>
					<image class="img_caishen" src="../static/caishen.png" mode="aspectFit"></image>
					<text class="username_text" style="font-size: 30rpx;color: #121C1F;margin-top: 40rpx;">{{ username }},您好</text>
					<text
						class="username_text"
						@tap="dateVisible1 = true"
						style="font-size: 30rpx;color: #121C1F;margin-top: 10rpx; width: 100%; text-align: center; white-space: nowrap;"
					>
						选择生辰：{{ birthday.year }}-{{ birthday.month }}-{{ birthday.day }} {{ birthday.hour }}:{{ birthday.minute }}
					</text>
					<view style="width: 452rpx;height: 2rpx;background: #D45151;margin-top: 5rpx;"></view>

					<image class="img_button" src="../static/button.png" @click="putMyBirthday" mode="aspectFit"></image>

					<view style="display: flex;flex-direction: column;align-items: flex-start;width: 341rpx;margin-top: 12rpx;">
						<text class="text_bottom">1.使用人工智能（AI）预测</text>
						<text class="text_bottom">2.{{ vipTime }} 到期</text>
						<text class="text_bottom">3.结果仅供参考</text>
					</view>

					<!-- <button @click="openVipShare">打开弹窗</button> -->
				</view>

				<view class="content_line_last">
					<view class="content_lb_view"></view>
					<view class="content_rb_view"></view>
				</view>
			</view>

			<w-picker
				:visible.sync="dateVisible1"
				mode="date"
				startYear="1940"
				:value="time"
				:current="false"
				fields="minute"
				@confirm="onConfirm($event, 'date1')"
				@cancel="onCancel"
				:disabled-after="false"
				ref="date1"
			></w-picker>

			<uni-popup ref="popup" type="dialog">
				<uni-popup-dialog
					type="input"
					message="成功消息"
					:duration="2000"
					:before-close="true"
					@close="close"
					@confirm="confirm"
				></uni-popup-dialog>
			</uni-popup>

			<uni-popup ref="vipshare" type="vipshare"><vipshare @shareVip="shareVip" @closevipshare="closevipshare"></vipshare></uni-popup>
		</view>
	</view>
</template>

<script>
import uniPopup from '@/components/uni-popup/uni-popup.vue';
import uniPopupMessage from '@/components/uni-popup/uni-popup-message.vue';
import uniPopupDialog from '@/components/uni-popup/uni-popup-dialog.vue';
import vipshare from '@/components/uni-popup/vipshare.vue';
import helper from '../common/helper.js';
import cs from '../components/cs/cs.vue';
export default {
	components: {
		uniPopup,
		uniPopupMessage,
		uniPopupDialog,
		vipshare,
		cs,
	},
	data() {
		return {
			ver: false,
			username: helper.myUserInfo.wxName,
			birthday: {
				year: '1980',
				month: '01',
				day: '08',
				hour: '00',
				minute: '00',
			},
			vipTime: '',
			reUserInfo: {},
			dateVisible1: false,
			result: {
				result: '',
			},
			time: '2020-04-07 00:00',
		};
	},
	onLoad(options) {
		helper.commentUserId = decodeURIComponent(options.scene);
		if (helper.commentUserId == null || helper.commentUserId == '' || helper.commentUserId == undefined || helper.commentUserId == 'undefined') {
			helper.commentUserId = options.commentUserId;
			return;
		}
		console.log('本次的邀请人是===' + helper.commentUserId);

		// console.log(this.birthday.year);
		// this.getTokenAndUserInfo();
	},
	created() {
		uni.hideTabBar();
		this.getRvw();
	},

	onShow() {
		console.log(this.birthday.year);
		this.getTokenAndUserInfo();
	},
	onShareAppMessage: function(res) {
		console.log('myid=' + helper.myUserInfo.id);
		if (res.from === 'button') {
			// 来自页面内转发按钮
		}
		return {
			title: '来测一测今日财神方位！',
			path: 'pages/homePage?commentUserId=' + helper.myUserInfo.id,
		};
	},
	methods: {
		// 审核测试
		getRvw() {
			uni.request({
				url: helper.websiteUrl + '/api/v1/testToken',
				method: 'GET',
				data: {},
				header: {
					Authorization: '7acca4a090f8192efe745f2cf1617478',
				},
				success: res => {
					uni.showTabBar();
					this.ver = false;
				},
				fail: err => {
					this.ver = true;
				},
				complete: () => {},
			});
		},
		putMyBirthday() {
			uni.showLoading({
				title: '加载中',
			});
			this.$request
				.get('/test/testLucky', {
					data: {
						birthday: this.birthday,
					},
					dataType: 'json',
					responseType: 'text',
				})
				.then(res => {
					uni.hideLoading();
					console.log(res);
					helper.myLucky = res.data.data;
					console.log(res.data.code);
					if (res.data.code == 40001) {
						//不是会员
						this.open();
						return;
					}

					//如果没有注册
					if (res.data.code == 401) {
						//没有注册
						return;
					}
					uni.navigateTo({
						url: './resultPage',
					});
				})
				.catch(error => {
					uni.hideLoading();
					console.log('error:', error);
				});
		},
		getTokenAndUserInfo() {
			//把this存到这里，不然异步请求拿不到，后续用that代替this
			let that = this;
			uni.getStorage({
				key: 'token',
				success(storageRes) {
					console.log(helper.websiteUrl + '/api/v1/testToken');
					helper.myToken = storageRes.data;
					uni.request({
						url: helper.websiteUrl + '/api/v1/testToken',
						method: 'GET',
						header: {
							'Content-Type': 'application/x-www-form-urlencoded',
							Authorization: helper.myToken,
						},
						success: res => {
							if (res.data.code == 200) {
								console.log('验证成功，token有效');
								helper.ifopv = res.data.data.ifopv;
								//把返回的用户信息存到全局变量
								helper.myUserInfo = res.data.data.userInfo;
								//渲染页面数据
								that.username = helper.myUserInfo.wxName;
								that.vipTime = res.data.data.vipTime;

								//把用户生日自动填入输入框
								that.time = helper.myUserInfo.birthday;
								let date = new Date(that.time.replace(/-/g, '/'));
								that.birthday.year = date.getFullYear();
								that.birthday.month = ('0' + (date.getMonth() + 1)).slice(-2);
								that.birthday.day = ('0' + date.getDate()).slice(-2);
								that.birthday.hour = ('0' + date.getHours()).slice(-2);
								that.birthday.minute = ('0' + date.getMinutes()).slice(-2);
							} else {
								console.log('token无效');
								uni.redirectTo({
									url: 'index/index',
								});
							}
						},
					});
				},
				fail() {
					console.log('空数据');
					// uni.redirectTo({
					// 	url: 'index/index'
					// });
				},
			});
		},
		onConfirm(res, type) {
			console.log('选择时间后---res = ' + res.result);
			console.log('选择时间后---type = ' + type);
			this.result = res;
			let date = new Date(this.result.result.replace(/-/g, '/'));

			this.birthday.year = date.getFullYear();
			this.birthday.month = ('0' + (date.getMonth() + 1)).slice(-2);
			this.birthday.day = ('0' + date.getDate()).slice(-2);
			this.birthday.hour = ('0' + date.getHours()).slice(-2);
			this.birthday.minute = ('0' + date.getMinutes()).slice(-2);
		},
		onCancel() {},
		open() {
			this.$refs.popup.open();
		},
		/**
		 * 点击购买会员按钮触发
		 * @param {Object} done
		 */
		close(done) {
			// TODO 做一些其他的事情，before-close 为true的情况下，手动执行 done 才会关闭对话框
			// ...
			console.log('payVip');
			uni.switchTab({
				url: './myPage',
			});
			done();
		},
		/**
		 * 点击单次购买按钮触发
		 * @param {Object} done
		 * @param {Object} value
		 */
		confirm(done, value) {
			// 输入框的值
			console.log('payOne');
			// TODO 做一些其他的事情，手动执行 done 才会关闭对话框
			// 发起购买单日会员
			uni.showLoading({
				title: '支付中',
			});
			//把this存到这里，不然异步请求拿不到，后续用that代替this
			let that = this;
			this.$request
				.post('/pay/payVip', {
					data: {
						timeStyle: 5, //+1因为后台的会员充值是从2开始的，1是单日充值
					},
					dataType: 'json',
					responseType: 'text',
				})
				.then(res => {
					uni.hideLoading();

					//支付
					console.log(res);
					//后台订单ID
					let orderId = res.data.data.orderId;
					//发起支付
					uni.requestPayment({
						provider: 'wxpay',
						timeStamp: res.data.data.wxPayRequest.timeStamp,
						nonceStr: res.data.data.wxPayRequest.nonceStr,
						package: res.data.data.wxPayRequest.packageValue,
						signType: res.data.data.wxPayRequest.signType,
						paySign: res.data.data.wxPayRequest.paySign,
						success: function(res) {
							console.log('success:' + JSON.stringify(res));
							console.log('orderId=====:' + orderId);
							// that.$refs.vipshare.open();
							that.getTokenAndUserInfo();
						},
						fail: function(err) {
							console.log('fail:' + JSON.stringify(err));
						},
					});
				})
				.catch(error => {
					uni.hideLoading();
					console.log('error:', error);
				});

			done();
		},
		openVipShare() {
			this.$refs.vipshare.open();
		},
		shareVip(done) {
			console.log('sharevip');
			done();
			let that = this;
			this.$request
				.post('/pay/addvip', {
					data: {},
					dataType: 'json',
					responseType: 'text',
				})
				.then(res => {
					console.log('res:', res);
					uni.showToast({
						title: res.data.data,
						icon: 'none',
					});
				})
				.catch(error => {
					console.log('error:', error);
				});
		},
		closevipshare(done) {
			console.log('closevipshare');
			done();
		},
	},
};
</script>

<style lang="scss" scoped>
.content {
	width: 100vw;
	height: 100vh;
	border-style: solid;
	border-width: 18rpx;
	border-color: #d45151;
	box-sizing: border-box;
	display: flex;
	justify-content: center;
	align-items: center;
	padding-top: 20rpx;
	padding-bottom: 20rpx;
	background: #e6dcc8;
}

.content_line {
	width: 90%;
	height: 100%;
	border-style: solid;
	border-width: 9rpx;
	border-color: #d45151;
	box-sizing: border-box;
	display: flex;
	justify-content: space-between;
	flex-direction: column;
}

.content_line_first {
	display: flex;
	justify-content: space-between;
}

.content_line_last {
	display: flex;
	justify-content: space-between;
}

.content_lt_view {
	width: 34rpx;
	height: 34rpx;
	background: #d45151;
	margin-left: -17rpx;
	margin-top: -17rpx;
}

.content_rt_view {
	width: 34rpx;
	height: 34rpx;
	background: #d45151;
	margin-right: -17rpx;
	margin-top: -17rpx;
}

.content_lb_view {
	width: 34rpx;
	height: 34rpx;
	background: #d45151;
	margin-left: -17rpx;
	margin-bottom: -17rpx;
	align-self: flex-end;
}

.content_rb_view {
	width: 34rpx;
	height: 34rpx;
	background: #d45151;
	margin-right: -17rpx;
	margin-bottom: -17rpx;
	align-self: flex-end;
}

.context_view {
	flex-grow: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.img_suancaishen {
	width: 410rpx;
	height: 146rpx;
}

.img_slogin {
	width: 634rpx;
	height: 88rpx;
}

.img_caishen {
	width: 287rpx;
	height: 367rpx;
}

.img_button {
	width: 341rpx;
	height: 86rpx;
	margin-top: 28rpx;
}

.text_bottom {
	font-size: 23rpx;
	color: #a19d99;
}
</style>
